<div class="flex-row">
  <section class="sidebar flex-col" [ngClass]="{'sidebar-hidden':!sidebarVisible,
                'sidebar-show':sidebarVisible&&!sidebarFirstLoad}">
    <div class="menu-items flex-col" [ngClass]="{'hidden':!sidebarVisible}">
      <div class="menu-brand flex-col">
        <h6>SF</h6>
        <span>by hackerschoice</span>
      </div>

      <div *ngFor="let menu of menuItems" class="menu-button"
        [ngClass]="{'active-bg' : activeMenu === menu.name, 'inactive-bg' : activeMenu !== menu.name}"
        (click)="setActiveMenu(menu.name)" [title]="menu.name">
        <div class="menu-icon">
          <img [alt]="menu.name" [src]="menu.ilink">
        </div>
      </div>

    </div>

    <div class="instance-info">
      <div class="instance-upgrade">
      </div>
      <div class="instance-name">
      </div>
    </div>
  </section>
  <section class="content-view flex-col">
    <terminal-view [ngClass]="{'hidden': activeMenu!='terminal'}"
      (noOfTerminalsChange)="setNoOfTerminals($event)"></terminal-view>
    <desktop-view [ngClass]="{'hidden': activeMenu!='desktop'}"></desktop-view>
    <files-view [InView]="activeMenu=='files'"
      [ngClass]="{'hidden': activeMenu!='files'}" [noOfTerminals]="noOfTerminals"></files-view>
  </section>
</div>